/*生成三角*/
.box1 {
  height: 0;
  width: 0;
  overflow: hidden; //兼容性后，ie6下最小高度问题
  border-width: 10px;
  //transparent   透明
  border-color: transparent transparent red transparent;
  border-style: dashed dashed solid dashed;
}

//匹配模式
.triangle(top,@width:5px,@color:#f00) {
  border-width: @width;
  border-color: transparent transparent @color transparent;
  border-style: dashed dashed solid dashed;
}

.triangle(right,@width:5px,@color:#f00) {
  border-width: @width;
  border-color: transparent transparent transparent @color;
  border-style: dashed dashed dashed solid;
}

.triangle(left,@width:5px,@color:#f00) {
  border-width: @width;
  border-color: transparent @color transparent transparent;
  border-style: dashed solid dashed dashed;
}

.triangle(bottom,@width:5px,@color:#f00) {
  border-width: @width;
  border-color: @color transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}

//公用样式可以放到这个class里面的，第一个参数是@_,后面的参数与上面的保持一致；
.triangle(@_,@width:5px,@color:#f00) {
  height: 0;
  width: 0;
  overflow: hidden; //兼容性后，ie6下最小高度问题
}

.box2 {
  .triangle(right, 50px, green);
  .triangle(bottom, 50px, green);
}

.box3 {
  .triangle(right, 50px, green);
}

//定位

.pos(r) {
  position: relative;
}

.pos(a) {
  position: absolute;
}

.pos(f) {
  position: fixed;
}

.box4 {
  .pos(f);
  .pos(a);
  .pos(r);
  left: 10px;
  top: 20px;
  width: 200px;
  height: 200px;
  background: red;
}